<template>
  <div class="wrap clearfix">
    <div class="box_left">
      <div class="left_top clearfix">
        <div class="classify">
          <div class="c_item">
            <h4 class="classify_one">毛纱</h4>
            <div class="classify_two">
              <span>普梳纱线</span>
              <span>高配纱线</span>
              <span>更多....</span>
            </div>
          </div>
          <div class="c_item">
            <h4 class="classify_one">毛纱</h4>
            <div class="classify_two">
              <span>普梳纱线</span>
              <span>高配纱线</span>
              <span>更多....</span>
            </div>
          </div>
          <div class="c_item">
            <h4 class="classify_one">毛纱</h4>
            <div class="classify_two">
              <span>普梳纱线</span>
              <span>高配纱线</span>
              <span>更多....</span>
            </div>
          </div>
          <div class="c_item">
            <h4 class="classify_one">毛纱</h4>
            <div class="classify_two">
              <span>普梳纱线</span>
              <span>高配纱线</span>
              <span>更多....</span>
            </div>
          </div>
        </div>
        <div class="banner_box">
          <banner v-if="advertList.length" :advertList='advertList' :terminal='`PC`' @refresh='refreshAdvertList'></banner>
        </div>
      </div>
      <div class="left_bottom clearfix">
        <div class="b_item">
          <img src="../img/adv_1.png" alt="">
          <span>工厂入驻</span>
        </div>
        <div class="b_item">
          <img src="../img/adv_2.png" alt="">
          <span>发布需求</span>
        </div>
        <div class="b_item">
          <img src="../img/adv_3.png" alt="">
          <span>手机下单</span>
        </div>
        <div class="b_item clearfix">
          <img src="../img/adv_4.png" alt="">
          <span>供应链金融</span>
        </div>
      </div>
    </div>
    <div class="box_right">
      <div class="right_top">
        <div class="login_box">
          <img src="../img/login.png" alt="">
        </div>
        <h3>授信额度</h3>
        <table>
          <tr>
            <td>浙江好下单***公司</td>
            <td>获赠</td>
            <td>500万</td>
            <td>额度</td>
          </tr>
          <tr>
            <td>浙江好下单***公司</td>
            <td>获赠</td>
            <td>500万</td>
            <td>额度</td>
          </tr>
          <tr>
            <td>浙江好下单***公司</td>
            <td>获赠</td>
            <td>500万</td>
            <td>额度</td>
          </tr>
          <tr>
            <td>浙江好下单***公司</td>
            <td>获赠</td>
            <td>500万</td>
            <td>额度</td>
          </tr>
          <tr>
            <td>浙江好下单***公司</td>
            <td>获赠</td>
            <td>500万</td>
            <td>额度</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import banner from './banner'
export default {
  props: {
    advertList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  components: {
    banner
  },
  methods: {
    refreshAdvertList() {
      this.$emit('refresh')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../../scss/_var.scss';
.wrap {
  font-size: 12px;
  .box_left {
    width: 615px;
    height: 281px;
    float: left;
    .left_top {
      width: 100%;
      height: 281px;
      .classify {
        float: left;
        width: 185px;
        height: 100%;
        background: #fff;
        padding: 15px 10px;
        border: 1px solid $border-gray;
        .c_item {
          .classify_one {
            color: $color-main;
          }
          .classify_two {
            margin: 6px 0 25px;
            color: #222;
            span {
              margin-right: 10px;
              &:nth-of-type(3) {
                margin-right: 0;
              }
            }
          }
        }
      }
      .banner_box {
        float: left;
        margin-left: 10px;
        width: 418px;
        height: 100%;
        background: #fff;
        border: 1px solid $border-gray;
      }
    }
    .left_bottom {
      width: 100%;
      height: 72px;
      margin-top: 14px;
      .b_item {
        float: left;
        width: 24%;
        height: 100%;
        line-height: 72px;
        background: #fff;
        margin-right: 8px;
        text-align: center;
        border: 1px solid $border-gray;
        &:nth-of-type(4) {
          margin-right: 0;
        }
        img {
          width: 35px;
          height: 35px;
          vertical-align: middle;
        }
      }
    }
  }
  .box_right {
    width: 230px;
    float: left;
    margin-left: 10px;
    height: 367px;
    background: #fff;
    border: 1px solid $border-gray;
    .login_box {
      height: 152px;
    }
    h3 {
      height: 35px;
      line-height: 35px;
      font-size: 14px;
      text-align: center;
      background: $bg-gray;
    }
    table {
      width: 95%;
      margin: 0 auto;
      color: #848484;
      tr td {
        padding-bottom: 16px;
      }
      tr:nth-of-type(1) td {
        padding-top: 16px;
      }
    }
  }
}
</style>


